<template>
    <div class="list">
        <div v-if="loading" class="item skeleton-screen">
            <div class="img"><div class="rectangle"></div></div>
            <div class="txt">
                <div class="txt-head">
                    <div class="title rectangle"></div>
                    <div class="content">
                        <p class="rectangle"></p>
                        <p class="rectangle"></p>
                        <p class="rectangle"></p>
                    </div>
                </div>
                <div class="icon-box rectangle"></div>
            </div>
        </div>
        <div v-else-if="list.length > 0 && !loading" @click="goBlogDetails(item.id)" v-for="(item,index) in list" :key="index" class="item">
            <div class="img" v-show="JSON.parse(item.img).length"><img :src="JSON.parse(item.img).length > 0?JSON.parse(item.img)[0]:''" alt="图片"></div>
            <div class="txt"> 
                <div class="txt-head">
                    <div class="title">{{ item.title }}</div>
                    <div class="content">{{ item.content.length > 150? item.content.slice(0, 150) + '...':item.content }}</div>
                </div>
                <div class="icon-box">
                    <div class="left">
                        <span class="icon-item">
                            <i class="el-icon-view"></i>{{ item.pageview }}
                        </span>
                        <span>
                            <i class="el-icon-star-off"></i>{{ item.collection }}
                        </span>
                    </div>
                    <div class="right">
                        <span class="icon-item">
                            <i class="el-icon-user-solid">{{ item.author }}</i>
                        </span>
                        <span class="icon-item">
                            <i class="el-icon-time">{{ item.createTime }}</i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div v-else-if="list.length <= 0 && !loading" class="tip">
            暂无数据
        </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                hoverIndex: "",
                animate:false,
                NoImg:'http://39.97.171.32:9000/upload/935c97be-e308-4afb-b5b6-977cb1988262.jpg'
            };
        },
        props: {
            list: {
                type: Array,
                default: ()=>{
                    return []
                }
            },
            loading: {
                type: Boolean,
                default: true
            },
            edit: {
                type: Boolean,
                default: false
            }
        },
        methods: {
            goBlogDetails(id){
                if(this.edit) {
                    this.$router.push({path:'/blog',query: {id:id}})
                }
                else {
                    this.$router.push({path:'/blogDetails',query: {id:id}})
                }

            }
        }
    };
</script>

<style scoped lang="scss">
    .list {
        width:100%;
        .item {
            width:100%;
            height:220rem;
            border-bottom: 1rem solid #eee;
            padding: 0 20rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            .txt {
                width: 100%;
                flex:1;
                height: 156rem;
                padding-left: 20rem;
                position: relative;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .title {
                    color: #333;
                    font-size: 24rem;
                    line-height: 1.5;
                    width: 100%;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space: nowrap;
                    transition: all 0.4s;
                    font-weight: 400;
                    cursor: pointer;
                    height: 36rem;
                }
                .title:hover {
                    color:$color;
                }
                .content {
                    font-size: 14rem;
                    color: #666;
                    display: -webkit-box;
                    overflow: hidden;
                    -webkit-box-orient: vertical;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 3;
                    margin-top: 10rem;
                    p {
                        height: 18rem;
                        margin-top:5rem;
                    }
                    p:last-child {
                        width: 30%
                    }
                }
                .icon-box {
                    font-size: 12rem;
                    color:#999;
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                    height: 18rem;
                    .left {
                        span {
                            margin-right:10rem;
                        }
                    }
                    .right {
                        span {
                            margin-left:10rem;
                        }
                    }
                }
            }
            .img {
                width: 156rem;
                height: 156rem;
                overflow: hidden;
                background:#eee;
                img {
                    width: 156rem;
                    height: 156rem;
                }
                div {
                    width: 156rem;
                    height: 156rem;
                }
            }
        }
        .skeleton-screen {
            .rectangle {
                background: #eee;
                background-image: linear-gradient(90deg, #e5e5e5 25%, #f1f1f1 37%, #e5e5e5 63%);
                width: auto;
                height: 0.6rem;
                list-style: none;
                background-size: 400% 100%;
                background-position: 100% 50%;
                animation: skeleton-loading 1.4s ease infinite;
            }
        }

        @keyframes skeleton-loading {
            0% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0 50%;
            }
        }
    }
    .tip {
        text-align: center;
        color: #999;
        padding-top: 20rem;
    }
</style>
